<template>
    <div class="taotejia">
    	<div class="header-title">
    		淘好货
    	</div>
    	<div class="class-list">
    		<ul>
    			<li class="ed1c">推荐</li>
    			<li v-for="classItem in classList">
                    <router-link :to="{path:'/item_classify',query:{class_id:classItem.id,taoqinggouName:'/goods'}}">
                          {{classItem.cate}}
                    </router-link>
                </li>
    		</ul>
    	</div>
    	 <!--轮播-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                   <div @click="goDetail(goodsurl.url1)">
                       <img src="../../assets/img/taoqinggou/banners.png" alt=""></div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <!--搜索header-->
        <div class="header_search" style="text-align: center">
            <div class="search_ipt">
                <img src="../../assets/img/taoqinggou/search.png" alt="" @click="search()">
                <input id="search" type="search" class="mui-input-clear" placeholder="搜索商品、品类" v-model="keyWord" @keyup="show($event)">
            </div>
        </div>
        <!--menu-->
        <ul class="menu horizontal-list clear">
            <li>
                <router-link :to="{path:'/item_classify',query:{taoqinggouName:'/video'}}"><img
                        src="../../assets/img/taoqinggou/shipin.png" alt="">视频专区
                </router-link>
            </li>
            <li>
                <router-link :to="{path:'/item_classify',query:{taoqinggouName:'/brand'}}"><img
                        src="../../assets/img/taoqinggou/pingpai.png" alt="">品牌精选
                </router-link>
            </li>
            <li>
                <router-link :to="{path:'/item_classify',query:{taoqinggouName:'/today'}}"><img
                        src="../../assets/img/taoqinggou/shangxin.png" alt="">实时上新
                </router-link>
            </li>
            <li>
                <router-link :to="{path:'/item_classify',query:{class_id:100,taoqinggouName:'/rank'}}"><img
                        src="../../assets/img/taoqinggou/fengqing.png" alt="">今日疯抢
                </router-link>
            </li>
        </ul>
        <ul class="menu horizontal-list clear">
            <li class="menu-detail" v-for="item in chosedGoods"  @click="goDetail(item.new_url)">
                    <img  :src="'http:'+item.thumb" alt="">
                        	<div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.title}}</div>
                        	<div class="ed1c">￥{{item.price}}</div>
            </li>
        </ul>
        <div class="banner">
        	<div @click="goDetail(goodsurl.url2)">
            <img src="../../assets/img/taoqinggou/banner.png"/></div>
        </div>
        <!--猜你喜欢-->
        <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" @bottom-status-change="handleTopChange"
                     ref="loadmore">
            <ul class="guess vertical-list">
                <li class="guess_header">
                    	猜你喜欢
                </li>
                <li class="item_goods" v-for="product in products"  @click="goDetail(product.new_url)">
                        <img class="goods_img" :src="'http:'+product.thumb" :alt="product.title">
                        <div class="goods_info">
                            <p class="goods_desc">
                                <span style="color: rgb(237, 28, 28);" v-if="product.site=='tmall'">【天猫】</span>
                                 <span style="color: rgb(237, 28, 28);" v-else>【淘宝】</span>
                                {{product.title}}
                            </p>
                            <p class="price"> ￥{{product.price}}</p>
                        </div>
                    <!--<img class="add_cart" src="../../assets/img/index/add.png"/>-->
                </li>
            </ul>
        </mt-loadmore>
    </div>
</template>

<style>
    @import url("./taotejia.css");
    @import url('../../assets/css/swiper.css');
</style>
<script>
    import Layer from '../../assets/js/MessageBox'
    import API from '../../assets/js/API'

    export default {
        data() {
            return {
                topStatus: '',
                imageDomain: API.imageDomain,
                products: [],
                allLoaded: false,
                productQuery: {
                    currentPage: 1,
                    homeFlag: "1"
                },
                keyWord: '',
                versionInfo: {
                    type: "1",
                    version: API.currentVersion
                },
                checkResult: {},
                classList:[],
                 rowscount:0,//总条数
                pagesize:1,//总的页数
                allProducts:[],
                chosedGoods:[],
                goodsurl:{
                    url1:'https://uland.taobao.com/coupon/edetail?e=5aHcqxzNH9sGQASttHIRqYRppbGnbriShBLqtLgxeIibeiQ8dXrIVtVkL%2BKg8mUW1RIVtPElGzFHDsrRqJfr5EhMrwC97%2FSy1mAGkagvFdNY4Y%2Fgpq45GoD0X04J4a2T&traceId=0ab32db215089145288004647e&src=wysd_lqtui&activityId=ac00eaec9e294491b608e1770eb2d89e',
                    url2:'https://uland.taobao.com/coupon/edetail?e=1HMhvcjDgLQGQASttHIRqY%2BMNeREe2MCbrVPhSvHYGqbeiQ8dXrIVtVkL%2BKg8mUW1RIVtPElGzFHDsrRqJfr5EhMrwC97%2FSy1mAGkagvFdNY4Y%2Fgpq45GoD0X04J4a2T&traceId=0bb3b93c15089137979782555e&src=wysd_lqtui&activityId=7c77346a62204829b9b1db132e444800'
                }

            }
        },
        created() {
             window.scrollTo(0,0);
            let isIos = this.isIOS();
            if (isIos) {
                this.versionInfo.type = "2";
            }
             this.getClass();
             this.loadData();
        },
        mounted() {

        },
        methods: {
            getClass(){
               let url=API.taotejia+API.cates;
               console.log(url)
                 this.$http.post(url,{},{
                      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                 }).then(
                     (res)=>{
                          console.log(res.body.data.result)
                         if(res.body.code==1){
                               res.body.data.result.forEach(function(element) {
                                   let status=(element.cate=="男装"||element.cate=="女装"||element.cate=="内衣"||element.cate=="母婴儿童"||element.cate=="美妆护肤"||element.cate=="家居")
                                   if(status){
                                       this.classList.push(element);
                                   }
                               }, this);
                               console.log(this.classList)
                         }else{
                              Layer.showMsg('获取列表失败！');
                         }
                        
                     },
                     (err)=>{
                          Layer.showMsg("服务器开小差了...")
                         return
                     }
                 )
            },
             loadData(){
                let url=API.taotejia+'/rank';
                this.productQuery.sortEnum = "0";
                let form=new FormData()
                if(this.apiName=='/goods'){
                    form.append('cate',this.class_id)
                     form.append('page',this.productQuery.currentPage)
                }
                  this.$http.post(url,form,
                  {
                       headers: {'Content-Type': 'application/x-www-form-urlencoded,multipart/form-data'}
                  }
                  ).then(
                (res) => {
                    console.log(res.body.data)
                    if (res.body.code==1) {
                         this.allProducts= res.body.data.result;
                          this.products=this.allProducts.slice((this.productQuery.currentPage-1)*30,this.productQuery.currentPage*30).reverse()
                         this.rowscount= res.body.data.rowscount;
                         if(res.body.data.pagecount){
                              this.pagesize=res.body.data.pagecount
                         }
                         for(let i=1;i<=4;i++){
                             this.chosedGoods.push(this.allProducts[i*15])
                         }   
                         console.log(this.chosedGoods)
                    } else {
                        Layer.showMsg("获取列表失败！");
                    }
                },
                (error) => {
                    Layer.showMsg("服务器开小差了...")
                    return
                }
            )
            },
            goBack() {
                this.$router.goBack()
            },
             goDetail(new_url) {
                  var w=plus.webview.create( new_url,'taobao');
                      w.show();//在内置浏览器打开网页
                //    plus.runtime.openURL(new_url,function(){
                //         plus.runtime.openURL(new_url);
                //    },'com.taobao.taobao');跳转到淘宝在没有淘宝的情况下在手机浏览器打开
            },
            addRecord() {
                this.nextIndex();
                 let number=Math.ceil(this.rowscount/this.pagesize/30)
                    if(this.productQuery.currentPage<=number){
                        this.products = this.products.concat(this.allProducts.slice((this.productQuery.currentPage-1)*30,this.productQuery.currentPage*30))
                    }else{
                        this.allLoaded = true
                    }
                    
            },
            loadTop() {
                this.resetIndex();
                this.$refs.loadmore.onTopLoaded();
            },
            loadBottom() {
                // 加载更多数据
                this.addRecord();
                this.$refs.loadmore.onBottomLoaded();
            },
            handleTopChange(status) {
                this.topStatus = status;
            },
            nextIndex() {
                this.productQuery.currentPage = this.productQuery.currentPage + 1;
            },
            resetIndex() {
                this.productQuery.currentPage = 1;
            },
            search() {
                this.$router.push({path: '/item_classify', query: {'keyWord': this.keyWord}})
            },
            isIOS(){
                let u = navigator.userAgent;
                let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                return isiOS
            },
            show(ev) {
                if(ev.keyCode==13){
                    this.search();
                }
            }
        }
    }
</script>
